<template>
    <div class="Box">
        <div class="imgBox">
            <img :src="ele?.cover"/>
            <span>{{ ele?.score }}</span>
            <span class="shadow"></span>
        </div>
        <div class="titleBox">
            <span>{{ ele?.title }}</span>
            <span>{{ ele?.lable }}</span>
            <span v-if="ele?.note ">{{ ele?.note }}</span>
        </div>
    </div> 
</template>

<script lang="ts" setup>
import { onMounted,ref } from 'vue'
interface Props{
    item:{
        episode_id?:number,
        cover:string,
        rating?:string,
        title:string,
        sub_title:string,
        note?:string
    }
}

const props = defineProps<Props>()
let ele = ref()
onMounted(() => {
    if (props.item.episode_id) {
        let { episode_id: id,cover, rating: score, title, sub_title: lable } = props.item
        ele.value = { id,cover,score,title,lable }
    } else {
        ele.value = props.item
    }
})
</script>

<style lang="scss" scoped>
@import url(../../../assets/css/TVItem.scss);
@media  screen and (min-width: 0) and (max-width: 1600px){
    .imgBox{
        & img{
            height: 220px;
        }
    }
}
@media  screen and (min-width: 1600px) and (max-width: 2400px){
    .imgBox{
        & img{
            height: 280px;
        }
    }
}

.titleBox{
    & span:nth-child(1){
        font-size: 16px;
        margin-top: 5px;
    }
    & span:nth-child(3){
        color: #FE8E3F;
        box-sizing: border-box;
        background-color: #FF7F2433;
        padding: 2px 5px;
        font-size: 12px;
        transform: scaleY(0.8);
    }
}
</style>